cc.Class({
    extends: cc.Component,

    properties: {
        frame: cc.Node,
        guideLabel: cc.Node,
        hand: cc.Node
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this.guideStep = 1;

        // 触摸监听
        this.node.on('touchstart', this.onTouchStart, this);

        // 显示引导
        this.guide();
    },

    onDestroy () {
        // 取消监听
        this.node.off('touchstart', this.onTouchStart, this);
    },

    onTouchStart (event) {
        if(this.guideStep) {
            // 获取触摸点，转为Canvas画布上的坐标
            let pos = this.node.parent.convertToNodeSpaceAR(event.getLocation());
            
            // 获取相应按钮的大小范围
            let btn;
            if (this.guideStep == 1)
                btn = this.node.parent.getChildByName('Button1');
            else if(this.guideStep == 2)
                btn = this.node.parent.getChildByName('Button2');
            else if (this.guideStep == 3)
                btn = this.node.parent.getChildByName('Button3');
            let rect = btn.getBoundingBox();

            // 判断触摸点是否在按钮上
            if (rect.contains(pos)) {
                // 允许触摸事件传递给按钮(允许冒泡)
                this.node._touchListener.setSwallowTouches(false);
                this.guideStep++;
                
                // 如果三个按钮都点击了，则将guideStep设置为0，并隐藏所有相关节点
                if (this.guideStep > 3) {
                    this.guideStep = 0;
                    this.frame.active = false;
                    this.guideLabel.active = false;
                    this.hand.active = false;
                }
                else
                    this.guide();
            } 
            else {
                // 吞噬触摸，禁止触摸事件传递给按钮(禁止冒泡)
                this.node._touchListener.setSwallowTouches(true);
            }
        }
    },

    guide() {
        if (this.guideStep == 1) {
            let btn1 = this.node.parent.getChildByName('Button1');
            // 将frame节点移到第一个按钮
            this.frame.setPosition(btn1.position);
            // 引导文本
            this.showInfo('请点击第一个按钮~');
            // 手指动作
            this.setHand(btn1.position);
        }
        else if (this.guideStep == 2) {
            let btn2 = this.node.parent.getChildByName('Button2');
            // 将frame节点移到第二个按钮
            this.frame.setPosition(btn2.position);
            // 引导文本
            this.showInfo('请点击第二个按钮~');
            // 手指动作
            this.setHand(btn2.position);
        }
        else if (this.guideStep == 3) {
            let btn3 = this.node.parent.getChildByName('Button3');
            // 将frame节点移到第三个按钮
            this.frame.setPosition(btn3.position);
            // 引导文本
            this.showInfo('请点击第三个按钮~');
            // 手指动作
            this.setHand(btn3.position);
        }
    },

    showInfo (str) {
        // 显示引导文本
        this.unscheduleAllCallbacks();

        this.guideLabel.getComponent(cc.Label).string = ''
        let i = 0;

        this.schedule(()=> {
            this.guideLabel.getComponent(cc.Label).string += str[i];
            i++;
        }, 0.2, str.length-1);
    },

    setHand (pos) {
        // 设置引导手
        this.hand.setPosition(cc.v2(pos.x, pos.y-80));
        let moveForward = cc.moveBy(0.8, cc.v2(0, 50));
        let moveBack = cc.moveBy(0.8, cc.v2(0, -50));
        let repeatAction = cc.repeatForever(cc.sequence(moveForward, moveBack));
        this.hand.stopAllActions();             // 记得停止之前的动作
        this.hand.runAction(repeatAction);
    },

    // update (dt) {},
});
